<template>
    <div style="background: #111214;color:#fff;width: 100%;">
        <div class="box-login" >
            <div style="margin-top:30px;display: flex;justify-content: center;">
                <div>
                    <img src="../assets/img/Z.svg" alt="">
                    <img style='width: 160px;height: 43px;position: relative;top: -71px;left: calc(50% - 80px);' src="../assets/img/logo.png" alt="">
                </div>
            </div>
            <div style="text-align: left;">
                <div style="color: #fff;font-size: 16px;">手机号</div>
                <div style="position: relative;font-family: axis;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="phoneName" type="text" placeholder="请输入手机号">
                </div>
                <div style="color: #fff;font-size: 16px;margin-top:25px;">验证码</div>
                <div style="position: relative;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="verificationCode" type="text" placeholder="请输入验证码">
                    <span v-show="showCode" style="position: absolute;right:0;top: 23px;color:#6E59FF;font-size: 16px;" @click="stempCli">获取验证码</span>
                    <span v-show="!showCode" style="position: absolute;right:0;top: 23px;color:#6E59FF;font-size: 14px;">
                        {{numTime}}s 
                        <span style="color:#fff;">后重新获取</span>
                    </span>
                </div>
                <div style="color: #fff;font-size: 16px;margin-top:25px;">登录密码</div>
                <div style="position: relative;">
                    <input @focus="utils.blursCli" @blur="checkPassName" class="inputSty" v-model="passwordName" type="password" placeholder="密码中必须包含大小写字母、数字、特殊字符">
                </div>
                <div style="color: #fff;font-size: 16px;margin-top:25px;">确认密码</div>
                <div style="position: relative;">
                    <input @focus="utils.blursCli" @blur="checkPass" class="inputSty" v-model="passwordAgain" type="password" placeholder="请再次输入登录密码">
                </div>
                <div style="color: #fff;font-size: 16px;margin-top:25px;">邀请码</div>
                <div style="position: relative;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="invitationCode" type="text" placeholder="请输入邀请码">
                </div>
                <div style="display: flex;justify-content: space-between;">
                   <button @click="registerCli" class="btn">注册</button>
                </div>
                <div style="text-align: center;color:rgba(255, 255, 255, .6);font-size: 16px;margin-top:37px;text-decoration: underline;" @click="jumpDown">
                    已注册？点击下载
                </div>
                <div style="text-align: center;font-size: 12px;margin-top:25px;padding-bottom: 20px;">
                    <!-- <van-checkbox style="display: inline-block;position: relative;top: 2px;" icon-size="15px" v-model="checked" checked-color="#FF2E67"></van-checkbox> -->
                    <span style="color: rgba(255,255,255,.6);">登录表示您同意</span>
                    <span style="color: #6E59FF;">《用户协议》</span>
                    <span style="color: rgba(255,255,255,.6);">和</span>
                    <span style="color: #6E59FF;">《隐私协议》</span>
                </div>
           </div>
        </div>
    </div>

  </template>

  <script>
  import { Toast } from 'vant';
  export default {
    name: 'register',
    data () {
      return {
        verificationCode:'',
        phoneName:'',
        showCode: true,
        numTime: 60,
        invitationCode:'',
        passwordName:'',
        passwordAgain:''
      }
    },

    computed: {

    },
    mounted() {
        if(this.$route.params.id != 'id'){
            this.invitationCode = this.$route.params.id;
        }
    },
    methods: {
        stempCli(){
            if(!this.utils.checkPhone(this.phoneName)){
                Toast('手机号格式错误！');
                return
            }
            this.showCode = false;
            var list={
                phone:this.phoneName
            };
            this.numTime = 60;
            this.$http.post(this.utils.config+"/gz/pub/send_code?phone="+this.phoneName+"&type=REGISTER").then((data)=>{})
            var setTime = setInterval(()=>{
                if(this.numTime == 1){
                    clearInterval(setTime);
                    this.showCode = true;
                }else{
                    this.numTime--
                }
            },1000)
        },
        registerCli(){
            if(!this.utils.checkPhone(this.phoneName)){
                Toast('手机号格式错误！');
                return;
            }            
            if(!this.verificationCode){
                Toast('验证码不能为空！');
                return
            }
            if(!this.passwordName){
                Toast('密码不能为空！');
                return;
            }
            if(this.passwordAgain !== this.passwordName){
                Toast('两次输入密码不一致！');
                return
            }
            if(!this.invitationCode){
                Toast('邀请码不能为空！');
                return
            }    
            let arr = {
                phone:this.phoneName,
                code:this.verificationCode,
                password:this.$md5(this.passwordName),
                welcomeCode:this.invitationCode
            }
            this.$http.post(this.utils.config+"/gz/pub/regist_pwd",arr).then((data)=>{
                Toast(data.data.msg);
                if(data.data.success){
                    if(this.$route.params.id == 'id'){
                        setTimeout(()=>{
                            this.$router.push('/login')
                        },2200)
                    }
                }
            })        
        },
        checkPassName(){
            if(!this.passwordName){
                Toast('密码不能为空！');
            }
        },
        checkPass(){
            if(this.passwordAgain !== this.passwordName){
                Toast('两次输入密码不一致！');
            }
        },
        jumpDown(){
            window.open('http://z.blockinsight.com.cn/')
        }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .box-login{
          padding-top:  10px;
          margin: 0 20px;
      }
      .btn{
        width:100%;
        height:56px;
        color:#fff;
        margin-top:30px;
        background: #6E59FF;
        border:none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: bold;
      }
  </style>
